<template>
  <div class="page">
    <tree-list
      :path="selectPath"
      :show-level="1"
      @folder-select="folderSelect"
      @file-select="fileSelect"
    ></tree-list>
    <div class="content-wrapper">
      <c-card v-if="selectPath" title="置标识牌信息" class="real-data">
        <div class="search-row">
          <div>
            <div class="item">
              <label>是否在线</label>
              <el-select v-model="online" size="small">
                <el-option label="全部" :value="null"></el-option>
                <el-option v-for="(l, i) in locks" :key="i" :label="l" :value="l"></el-option>
              </el-select>
            </div>
            <div class="item">
              <label>开始日期</label>
              <el-date-picker
                v-model="startDate"
                type="date"
                placeholder="开始日期"
                size="small"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
            <div class="item">
              <label>结束日期</label>
              <el-date-picker
                v-model="endDate"
                type="date"
                placeholder="结束日期"
                size="small"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
            <c-search
              v-model="brandName"
              :height="30"
              :width="200"
              placeholder="名称搜索"
              class="item"
              @submit="_getBrands"
            />
          </div>
        </div>
        <el-table
          ref="table"
          v-loading="loading"
          :data="manualData"
          style="width: 100%"
        >
          <el-table-column label="序号" width="80">
            <template v-slot="{$index}">{{ $index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="brandName" label="设备/变量名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="brandName" label="标识牌名称"></el-table-column>
          <el-table-column prop="oprPerson" label="设置人"></el-table-column>
          <el-table-column prop="oprTime" label="设置时间"></el-table-column>
          <el-table-column prop="online" label="是否在线"></el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            layout="prev, pager, next"
            :page-size="page.size"
            :current-page.sync="page.index"
            :total="page.total"
            @current-change="_getBrands"
          ></el-pagination>
        </div>
      </c-card>
      <h3 v-else style="text-align: center; ">请先选择厂站...</h3>
    </div>
  </div>
</template>

<script>
import TreeList from "./components/TreeList";
import CCard from "@/components/CCard";
import CSearch from "@/components/CSearch";
import { debounce } from "lodash";
import { calcPageNum } from "@/utils";
export default {
  name: "Manual",
  components: {
    TreeList,
    CCard,
    CSearch
  },
  data() {
    return {
      loading: false,
      manualData: null,
      status: null,
      startDate: null,
      endDate: null,
      online: null,
      locks: ["是", "否"],
      selectPath: [],
      brandName: null,
      page: {
        index: 1,
        size: 10,
        total: 0
      }
    };
  },
  // created() {
  //   const path = this.$route.query.path;
  //   this.selectPath = path && path.split(",");
  //   path && this._getBrands();
  // },
  // beforeRouteUpdate(to, from, next) {
  //   if (to.fullPath !== from.fullPath) {
  //     this.selectPath = (to.query.path || "").split(",");
  //     this.selectPath.length > 0 &&
  //       this._getBrands(this.selectPath[this.selectPath.length - 1]);
  //   }
  //   next();
  // },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(to, from) {
        if (from && from.fullPath === to.fullPath) return;
        if (!to.query.path) return;
        this.selectPath = (to.query.path || "").split(",");
        if (this.selectPath.length > 0) {
          this.$nextTick(() => {
            const h = this.$refs["table"].$el.clientHeight;
            const n = calcPageNum(h);
            this.$set(this.page, "size", n);
            this._getBrands(this.selectPath[this.selectPath.length - 1]);
          });
        }
      }
    }
  },
  methods: {
    _getBrands() {
      const online = this.online,
        startTime = this.startDate,
        endTime = this.endDate,
        brandName = this.brandName,
        p = this.selectPath[this.selectPath.length - 1];
      const params = {
        substationId: parseInt(p.substr(1)),
        rows: this.page.size,
        page: this.page.index,
        online,
        startTime,
        endTime,
        brandName
      };
      this.loading = true;
      return this.$axios
        .get("/plat/isp/queryIdent", { params })
        .then(res => {
          if (res.code === 1) {
            this.$set(this.page, "total", res.data.total);
            this.manualData = res.data.rows;
          } else {
            throw res.msg;
          }
        })
        .catch()
        .finally(() => (this.loading = false));
    },
    folderSelect: debounce(function(path) {
      const urlPath = this.$route.path;
      this.selectPath = path;
      this.$router.push(urlPath + "?path=" + path.join(","));
    }, 500),
    fileSelect: debounce(function(path) {
      const urlPath = this.$route.path;
      this.selectPath = path;
      this.$router.push(urlPath + "?path=" + path.join(","));
    }, 500)
  }
};
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
}
.tree {
  position: absolute;
  width: 275px;
  height: 100%;
  overflow-y: auto;
  background: #222c3c;
  box-sizing: border-box;
}
.content-wrapper {
  overflow-y: auto;
  margin-left: 275px;
  height: 100%;
}
</style>
